<template>
  <van-nav-bar title="预申请信息" left-text="" left-arrow>
    <template #right>
      <van-icon name="scan" size="28" />
    </template>
  </van-nav-bar>
  <div class="formBg">
    <van-form label-align @submit="onSubmit" class="formBg">
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-cell-group inset>
        <van-field v-model="appNo" :border="false" type="digit" label="预申请编号" />
        <van-field v-model="username" :border="false" name="客户名称" label="客户名称" placeholder="客户名称" />
        <van-field v-model="telName" name="联系人" label="联系人" placeholder="联系人">
          <template #button>
            <van-button size="mini" type="primary">查看证件</van-button>
          </template>
        </van-field>
        <!-- 输入任意文本 -->
        <van-field v-model="address" label="联系地址" />
        <van-field v-model="demand" label="办电诉求" />
        <van-field v-model="expectedTime " label="期望上门时间" />
        <van-field v-model="applicationTime" label="预申请时间" />
        <van-field name="radio" input-align="left" label="申请资料" >
          <template #input>
            <van-button size="mini" type="primary">查看资料</van-button>
          </template>
        </van-field>
        <van-cell title="预申请审批结果" style="font-weight: 900; font-size: 16px" />
        <!-- <h4>预申请审批结果</h4> -->
      </van-cell-group>
    </van-form>

    <div>
      <van-field barder="true" label-align="center" input-align="right" class="fieldBg" name="switch" label="审批结果">
        <template #input>
          <van-switch v-model="checked" />
        </template>
      </van-field>
      <van-field
        barder="true"
        style="border-bottom: 1px solid #f2f2f2"
        label-align="center"
        class="fieldBg"
        v-model="approvalResults"
        rows="3"
        autosize
        label="标题文字"
        type="textarea"
        maxlength="150"
        placeholder="点击输入多行文本"
      />
    </div>
    <van-row justify="center" style="padding: 20px 0">
      <van-col span="8">
        <van-button block color="#4899D0" size="small" native-type="submit"  @click="onSubmit2">发送</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script lang="ts" setup name="application">
  import { computed } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  import { ref } from 'vue';


  const appNo = ref('1124344656')
  const username = ref('韩正飞')
  const telName = ref('飞飞飞')
  const address = ref('江苏省苏州市')
  const demand = ref('办理新增用电')
  const expectedTime = ref('2025-1-29')
  const checked = ref();
  const applicationTime = ref('2025-1-23')
  
  const approvalResults = ref('审批通过');

  const onSubmit = (values) => {
    console.log('submit', values);
  };
  const onSubmit2 = () => {
      let data = {
        checked: checked.value,
        approvalResults: approvalResults.value
      };
      console.log(data);
  };

  const { locale } = useI18n();

  let cellList = ['vue3', 'vite', 'vue-router', 'axios', 'Pinia', 'vue-i18n', 'postcss-px-to-viewport', 'varlet / vant / nutUI', 'eruda'];
  const userStore = useUserStore();
  const getUserInfo = computed(() => {
    const { name = '' } = userStore.getUserInfo || {};
    return name;
  });

  const changeLang = (type) => {
    setLang(type);
  };
</script>

<style lang="scss">
  .formBg {
    background-color: #f2f2f2;
  }
  .van-cell-group {
    background: #f2f2f2;
  }
  .van-cell {
    background-color: #f2f2f2;
  }
  .infoBg {
    background-color: #f2f2f2;
  }
  .fieldBg {
    background-color: #ffffff;
  }
  .van-nav-bar .van-icon{
    color: #000;
  }
</style>
